<template>
  <div id="app">
    <NavBar />
    <br>
    <br>
    <div class="dashboard-container">
      <el-row :gutter="20" class="mt-20">
        <el-col :span="24">
          <div class="user-info">
            <el-avatar :size="100" :src="require('../assets/avatar.jpg')"/>
            <div class="user-details">
              <h3>{{ user.name }}</h3>
              <p>优质会员 | {{ user.phoneNumber }}</p>
              <el-button type="primary" icon="el-icon-edit" @click="goInformation">编辑</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <br>
    <br>
    <div class="function-container">
      <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px">
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <router-link to="/personalCenter">
              <el-menu-item index="1">
                我的账户
              </el-menu-item>
            </router-link>
            <router-link to="/personalOrder">
              <el-menu-item index="2">
                我的订单
              </el-menu-item>
            </router-link>
            <router-link to="/personalService">
              <el-menu-item index="3">
                售后服务
              </el-menu-item>
            </router-link>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 订单信息表格 -->
          <el-table :data="bills" style="width: 100%">
            <el-table-column prop="billId" label="订单编号"></el-table-column>
            <el-table-column prop="paymentMethod" label="支付方式"></el-table-column>
            <el-table-column prop="paymentAmount" label="支付金额"></el-table-column>
            <el-table-column prop="paymentDate" label="支付日期"></el-table-column>
            <el-table-column prop="paymentReason" label="支付原因"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import axios from 'axios';

export default {
  data() {
    return {
      user: {
        name: '', 
        phoneNumber: ''
      },
      bills: [] // 存储订单信息
    };
  },
  components: {
    NavBar
  },
  created() {
    this.checkUserToken();
    this.fetchBills(); // 获取订单信息
  },
  methods: {
    goInformation() {
      this.$router.push({ path:'/information'});
    },
    checkUserToken() {
      const token = localStorage.getItem('userToken');
      if (token) {
        axios.get('http://localhost:8081/users/info', {
          headers: {
            'Authorization': 'Bearer ' + token
          }
        })
        .then(response => {
          this.user.name = response.data.userName;
          this.user.phoneNumber = response.data.phoneNumber;
          this.fetchBills(); // 确保在获取用户信息后获取订单信息
        })
        .catch(error => {
          console.error("Error fetching user info:", error);
        });
      }
    },
    fetchBills() {
      const token = localStorage.getItem('userToken');
      axios.get('http://localhost:8081/bills/all', {
        params: { phoneNumber: this.user.phoneNumber },
        headers: {
          'Authorization': 'Bearer ' + token
        }
      })
      .then(response => {
        this.bills = response.data;
      })
      .catch(error => {
        console.error("Error fetching bills:", error);
      });
    }
  }
}
</script>

<style>
  .dashboard-container {
    width: 70%;
    margin: 40px auto; /* 增加顶部边距 */
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  .user-info {
    display: flex;
    align-items: center;
  }
  .user-details {
    margin-left: 20px;
  }
  .user-details h3 {
    margin: 0 0 10px;
  }
  .function-container {
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  .el-aside {
    color: #333;
  }
</style>